﻿<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <title>jquery ui</title>
    <!-- 3.引入css文件 -->
    <link rel="stylesheet" href="jquery-ui-1.11.4.custom/jquery-ui.css">
    <style>
    .box {
        width: 600px;
        height: 400px;
        border: 2px solid #ccc;
    }
    
    .dr {
        width: 180px;
        height: 180px;
        border: 1px solid #ddd;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, .8);
    }
    </style>
    <!-- 1.引入jQuery库 -->
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <!--2.引入插件-->
    <script src="jquery-ui-1.11.4.custom/jquery-ui.js"></script>
    <script>
        $(function () {
            //交互（Interactions）
        $('.dr').draggable({//拖动
            containment: '.box',
            addClasses: false,
            axis: "x"
        }).resizable({//放大
            containment: '.box'
        });

        $('#accordion').accordion();

		$.widget( "custom.catcomplete", $.ui.autocomplete, {
		    _create: function() {
		      this._super();
		      this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
		    },
		    _renderMenu: function( ul, items ) {
		      var that = this,
		        currentCategory = "";
		      $.each( items, function( index, item ) {
		        var li;
		        if ( item.category != currentCategory ) {
		          ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
		          currentCategory = item.category;
		        }
		        li = that._renderItemData( ul, item );
		        if ( item.category ) {
		          li.attr( "aria-label", item.category + " : " + item.label );
		        }
		      });
		    }
		});
        var city = [{
            label: '北京',
            category: ''
        }, {
            label: '上海',
            category: ''
        }, {
            label: '广州',
            category: '广东'
        }, {
            label: '深圳',
            category: '广东'
        }, {
            label: '杭州',
            category: '浙江'
        }, {
            label: '苏州',
            category: '浙江'
        }];
        $('#city').catcomplete({
        	delay:0,
            source: city
        });
    });

    </script>
</head>

<body>
    <!-- 拖拽 -->
    <div class="box">
        <div class="dr">拖我</div>
    </div>
    <!-- 手风琴 -->
    <div id="accordion">
        <h3>First header</h3>
        <div>First content panel</div>
        <h3>Second header</h3>
        <div>Second content panel</div>
        <h3>Second header</h3>
        <div>Second content panel</div>
    </div>
    <!-- autocomplete -->
    <input type="text" id="city">
    <input type="date">
</body>

</html>
